import React from "react";
import {Button, Card, Form, Input, message, Modal, Result, Row, Spin, Radio, Cascader} from "antd";
import styles from "./Register.less";
import Link from 'umi/link';
import witty from "@/utils/wittyUtils";
import {connect} from "dva";
import router from 'umi/router';
import ChinaArea from "@/components/Tool/ChinaArea";

const FormItem = Form.Item;

@connect(({operatorModel}) => ({
    operatorModel
}))
class Register extends React.Component {

    state = {
        //-- 加载层
        loading: false,
        //--
        showResultModal: false,
    };

    handleRegisterSubmit = () => {
        const thisCtx = this;
        const {form, dispatch} = this.props;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            witty.validNilParams(values);
            const area = values.area;
            if (area) {
                delete values.area;
                if (area.length >= 1) {
                    values.provinceId = parseInt(area[0]);
                }
                if (area.length >= 2) {
                    values.cityId = parseInt(area[1]);
                }
                if (area.length >= 3) {
                    values.areaId = parseInt(area[2]);
                }
            }
            this.setState({loading: true});
            console.log(values);
            dispatch({
                type: 'operatorModel/saveOperator',
                payload: values,
                callback: function (data) {
                    thisCtx.setState({loading: false});
                    if (data && data.success) {
                        message.success('提交成功');
                        thisCtx.setState({
                            showResultModal: true
                        })
                    } else {
                        message.error('提交失败');
                    }
                }
            });
        });
    };

    handlerResult = () => {
        this.setState({
            showResultModal: false
        });
        router.push({
            pathname: '/user/login'
        });
    };

    render() {
        const {getFieldDecorator} = this.props.form;

        const {loading, showResultModal} = this.state;

        const formItemLayout = {
            labelCol: {
                xs: 24,
                sm: 8
            },
            wrapperCol: {
                xs: 24,
                sm: 16
            }
        };

        const resultLayout = {
            maxWidth: '560px',
            margin: '0 auto',
            padding: '24px 0 8px'
        };
        const titleLabel = {
            style: {
                color: "rgba(0, 0, 0, 0.85)",
                padding: '0 0 8px'
            }
        };

        return (
            <Spin spinning={loading}>
                <div className={styles.main}>
                    <Card title={'您正在注册议峰广告管理系统'} className={styles.card}>
                        <Form>
                            <FormItem label={'运营商名称'} {...formItemLayout}>
                                {getFieldDecorator('oname', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入运营商名称！'
                                        }
                                    ]
                                })(<Input size={'large'} type={'primary'} placeholder={'请输入运营商名称'} allowClear={true} />)}
                            </FormItem>
                            <FormItem label={'运营商类型'} {...formItemLayout}>
                                {getFieldDecorator('btype', {
                                    initialValue: 1,
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择运营商类型！',
                                        },
                                    ],
                                })(
                                    <Radio.Group>
                                        <Radio value={1}>企业</Radio>
                                        <Radio value={2}>个人</Radio>
                                    </Radio.Group>
                                )}
                            </FormItem>
                            <FormItem label={'联系人'} {...formItemLayout}>
                                {getFieldDecorator('contacts', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入联系人！'
                                        }
                                    ]
                                })(<Input size={'large'} type={'primary'} placeholder={'请输入联系人'} allowClear={true} />)}
                            </FormItem>
                            <FormItem label={'联系人手机号'} {...formItemLayout}>
                                {getFieldDecorator('tel', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入联系人手机号！',
                                        },
                                        {
                                            pattern: /^1\d{10}$/,
                                            message: '联系人手机号格式错误！'
                                        }
                                    ]
                                })(<Input size={'large'} type={'primary'} placeholder={'请输入联系人手机号'} allowClear={true} />)}
                            </FormItem>
                            <FormItem label={'所在城市'} {...formItemLayout}>
                                {getFieldDecorator('area', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择城市！',
                                        },
                                    ],
                                })(<Cascader size={'large'} type={'primary'} placeholder={"请选择城市"} options={ChinaArea} allowClear={true}/>)}
                            </FormItem>
                            <FormItem label={'详细地址'} {...formItemLayout}>
                                {getFieldDecorator('address', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入详细地址！',
                                        },
                                    ],
                                })(<Input size={'large'} type={'primary'} placeholder={"请输入详细地址"} allowClear={true}/>)}
                            </FormItem>
                            <FormItem label="邮箱" {...formItemLayout}>
                                {getFieldDecorator('email', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入邮箱！',
                                        },
                                    ],
                                })(<Input size={'large'} type={'primary'} placeholder={"请输入邮箱"} allowClear={true}/>)}
                            </FormItem>
                            <FormItem label="备注" {...formItemLayout}>
                                {getFieldDecorator('remark', {
                                })(<Input.TextArea
                                        size={'large'} type={'primary'}
                                        placeholder={"请输入备注"}
                                        className="custom"
                                        style={{
                                            height: 150,
                                            width: "100%",
                                            resize: 'none'
                                        }}
                                    />)
                                }
                            </FormItem>
                            <FormItem>
                                <Row>
                                    <Button size={'large'} className={styles.submit} type={'primary'}
                                            onClick={() => this.handleRegisterSubmit()}>注册</Button>
                                    <Link className={styles.login} to={'/user/login'}>
                                        使用已有账号登录
                                    </Link>
                                </Row>
                            </FormItem>
                            <p style={{textAlign: 'center'}}>注册即同意同意接收续保邮件/短信提醒</p>
                        </Form>
                    </Card>
                </div>
                <Modal
                    visible={showResultModal}
                    footer={false}
                    onCancel={() => this.handlerResult()}
                >
                    <Result
                        style={{...resultLayout}}
                        status={'success'}
                        title={'您的注册申请已提交'}
                        subTitle={
                            <div style={{padding: 20}}>
                                <div>议峰运营人员会在2个工作日内处理您的请求</div>
                                <div> 申请通过后，将会以邮件方式通知您</div>
                            </div>}
                    ></Result>
                </Modal>
            </Spin>
        );
    }
}

export default Form.create()(Register);
